<template>
    <el-row class="user" :gutter="16">
        <el-col :sm="24" :md="8" :lg="6">
            <el-card shadow="hover" style="margin-bottom: 16px">
                <div class="user_left">
                    <!-- <img class="avatar" src="@/assets/img/admin.png" draggable="false" /> -->
                    <img class="avatar" :src="avatar" draggable="false" />
                    <p class="user_name">{{ userInfo.username }}</p>
                    <!-- 个人信息 -->
                    <div class="line">
                        <Icons name="message" />
                        <span>{{ userInfo.email }}</span>
                    </div>
                    <div class="line">
                        <Icons name="postcard" />
                        <span>{{ userInfo.name }}</span>
                    </div>
                    <div class="line">
                        <Icons name="location-information" />
                        <span>{{ userInfo.address }}</span>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :sm="24" :md="16" :lg="18">
            <el-card shadow="hover">
                <template #header>
                    <span>修改密码</span>
                </template>
                <el-form class="user_right" :model="pwdForm" :rules="rules" ref="userFormRef" label-width="96px">
                    <el-form-item label="原密码" prop="pwd">
                        <el-input v-model.trim="pwdForm.pwd" type="password" clearable autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input v-model.trim="pwdForm.newPwd" type="password" clearable autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="再新密码" prop="newPwd2">
                        <el-input v-model.trim="pwdForm.newPwd2" type="password" clearable autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleClick('reset')">重置</el-button>
                        <el-button type="primary" @click="handleClick('save')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import { ElMessage } from "element-plus";
import { reactive, toRaw, ref, computed } from "vue";
import { useStore } from "vuex";
import { loginService } from "../../interfaces/service";

const api = import.meta.env.VITE_APP_FILE_API;

export default {
    setup() {
        const store = useStore();
        const pwdForm = reactive({
            pwd: '',
            newPwd: '',
            newPwd2: '',
        })

        const userInfo = toRaw(store.getters.getUser)

        const validatePass2 = (rule, value, callback) => {
            if (value !== pwdForm.newPwd) {
                callback(new Error("两次密码不一致!"))
            } else {
                callback()
            }
        }

        const userFormRef = ref();
        const rules = {
            pwd: [
                { required: true, message: "密码不能为空", trigger: "blur" },
                { min: 6, max: 11, message: '密码程度应该为6到11位', trigger: 'blur' }
            ],
            newPwd: [
                { required: true, message: "新密码不能为空", trigger: "blur" },
                { min: 6, max: 11, message: '密码程度应该为6到11位', trigger: 'blur' }
            ],
            newPwd2: [
                { required: true, message: "新密码不能为空", trigger: "blur" },
                { min: 6, max: 11, message: '密码程度应该为6到11位', trigger: 'blur' },
                { validator: validatePass2, trigger: 'blur' }
            ],
        };

        const avatar = computed(() => {
            return store.getters.getAvatarUrl;
        })

        const handleClick = type => {
            if (type === "reset") {
                userFormRef.value.resetFields();
                return;
            }
            userFormRef.value.validate(valid => {
                if (!valid) {
                    return false;
                } else {
                    let post_data = {
                        'pwd': pwdForm.pwd,
                        'newPwd': pwdForm.newPwd,
                        'type': userInfo.type.toLowerCase(),
                    }
                    console.log({post_data});
                    loginService.changePwd(post_data).then(res => {
                        if (res.success) {
                            ElMessage.success("修改成功");
                        }
                    })
                }
            });
        };

        return { userFormRef, userInfo, pwdForm, avatar, rules, handleClick };
    },
};
</script>

<style lang="scss" scoped>
.user_left {
    padding-top: 20px;

    .avatar {
        margin: 0 auto;
        display: block;
        width: 128px;
        height: 128px;
        border-radius: 50%;
    }

    .user_name {
        padding: 16px 0;
        font-size: 20px;
        line-height: 2;
        text-align: center;
    }

    .line {
        color: #555;
        line-height: 32px;

        i {
            margin-right: 8px;
            font-size: 18px;
        }
    }
}

.user_right {
    padding-right: 16px;
}
</style>
